<template>
  <div>
    <div id="myDiagramDiv"
      style="width:100%; height:900px; background-color: #E6EEEE;margin-bottom: 10px;outline:none;border: none;">
    </div>
    <!-- 将获取的画布内容的json串放入mySavedModel文本域内 -->
    <textarea id="mySavedModel" style="width:100%;height:0px ;border:0" />
  </div>
</template>
<script>
export default {
  name: 'testLine',
  data() {
    return {
      diagram: null,
      etadatalist: [],
      relationList: [],
    }
  },
  mounted() {
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      var $ = go.GraphObject.make;
      this.diagram =
        $(go.Diagram, "myDiagramDiv", {
          validCycle: go.Diagram.CycleNotDirected,
          "undoManager.isEnabled": true,
          allowLink: false,//是否可以创建新的链接线
          allowDelete: false,//是否可以删除链接线
          //去除点击时的蓝色边框
          nodeSelectionAdornmentTemplate:
            $(go.Adornment, "Auto",
              $(go.Shape, "Rectangle", { fill: "white", stroke: "#898B8C" }),
            ),
        });
      //连线
      this.diagram.linkTemplate =
        $(go.Link,
          { curve: go.Link.Bezier },  // Bezier curve  曲线
          // { mouseEnter: this.linkMouseEnter },//线的鼠标移入事件
          {
            routing: go.Link.Normal,
            corner: 10,//折线圆角
            // allowLink: false,
            relinkableFrom: false,//可设置连接起点
            relinkableTo: false,//可设置连接终点
            toShortLength: 4,//箭头大小
          },
          {
            doubleClick: this.linkClicked //线条双击事件
          },
          // 连线
          $(go.Shape, {
            margin: 100, name: "changecolor",
            strokeWidth: 1.5,//箭线粗细
            toArrow: "OpenTriangle", stroke: "#898B8C",
          }),
          $(go.Shape, {
            toArrow: "Standard",//箭头形状
            fill: "#898B8C"//箭头填充颜色
          })
        );




      var fieldTemplate =
        $(go.Panel, "TableRow", // gojs的panel对象，行的设置
          new go.Binding("portId", "name"), // new go.Binding用于实现数据的绑定
          {
            background: "transparent", // so this port's background can be picked by the mouse
            fromSpot: go.Spot.Right, // links only go from the right side to the left side
            toSpot: go.Spot.Left,
            fromLinkable: true,
            toLinkable: true
          },
          //子级样式
          $(go.TextBlock, {
            margin: new go.Margin(15, 15),
            height: 20,
            width: "auto",
            column: 2,
            font: "bold 13px sans-serif",
            // background: "#FFFF02",
            alignment: go.Spot.Left,
            fromLinkable: false,
            toLinkable: false
          },
            new go.Binding("text", "name")),
        );

      this.diagram.nodeTemplate =
        $(go.Node, "Auto", {
          copyable: false,
          deletable: false,
        },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          //表格形状  RoundedRectangle圆角矩形
          $(go.Shape, "RoundedRectangle", {
            fill: null,
            stroke: '#00cc99', //边框颜色
            strokeWidth: 2,
          }),
          $(go.Panel, "Vertical", {
            stretch: go.GraphObject.Horizontal,
          },
            $(go.Panel, "Auto",
              $(go.Shape, {
                strokeWidth: 0,
                fill: "#fff",
                scale: 0.5,
              }, new go.Binding("fill", "backgroundcolor")),//绑定背景颜色字段
              $(go.Panel, "Horizontal", {
                stretch: go.GraphObject.Horizontal
              },
                //绑定图片
                $(go.TextBlock, { //标题属性
                  alignment: go.Spot.Center,
                  margin: (10, 15),
                  stroke: "#cc3300",//文字颜色
                  textAlign: "center",
                  font: "bold 12pt sans-serif"
                },
                  new go.Binding("text", "name"), new go.Binding("stroke", "fontcolor"))//绑定文本
              )),
            // {
            //   click: this.nodeContextmenu,
            // },
            $(go.Panel, "Table", {
              name: "TABLE",
              stretch: go.GraphObject.Horizontal,
              defaultAlignment: go.Spot.Left,
              defaultStretch: go.GraphObject.Horizontal,
              itemTemplate: fieldTemplate
            },
              new go.Binding("itemArray", "fields")//表格内绑定行
            )
          )
        );


      //表格样式
      this.diagram.groupTemplate =
        $(go.Group, "Auto",
          { layout: $(go.LayeredDigraphLayout) },
          //表格背景
          $(go.Shape, "Rectangle", { fill: "#fff", stroke: "#e6eeee" }),
          $(go.Panel, "Table",
            {
              margin: 0.5,
              itemTemplate: fieldTemplate
            },  // avoid overlapping border with table contents
            $(go.RowColumnDefinition, { row: 0, background: "#eff4f8" }),  // header is white
            //+图标
            // $("SubGraphExpanderButton", { row: 0, column: 0, margin: 3 }),
            $(go.TextBlock,  // title is centered in header
              {
                row: 0, column: 1, font: "bold 14px Sans-Serif", stroke: "#898B8C",
                margin: (10, 15),
                textAlign: "center", stretch: go.GraphObject.Horizontal,
              },
              new go.Binding("text", "name")),
            $(go.Placeholder,  // becomes zero-sized when Group.isSubGraphExpanded is false
              { row: 1, columnSpan: 2, padding: 20, alignment: go.Spot.TopLeft },
            ),
          )
        );

      // declare the Diagram.layout:
      this.diagram.layout = $(go.LayeredDigraphLayout, { direction: 90, layerSpacing: 10, isRealtime: false });




      var { default: { data } } = require('./datalistarr/list');
      console.log(data, 'dataxxd');
      this.etadatalist = data.etadatalist,
        this.relationList = data.relationList
      this.diagram.model =
        $(go.GraphLinksModel,
          {
            copiesArrays: true,
            copiesArrayObjects: true,
            linkFromPortIdProperty: "fromPort",
            linkToPortIdProperty: "toPort",
            nodeDataArray: this.etadatalist,
            linkDataArray: this.relationList
          }
        );
    },
    //线条点击
    linkClicked(e, obj) {
      console.log('0000');
      console.log(e, 'e');
      console.log(obj, 'obj');// ef  ==>  vf  两个链接的数据
      this.afresh();
    },
    afresh() {
      // 清空当前画布
      this.diagram.div = null;
      // 数据清空一次
      this.etadatalist = [];
      this.relationList = [];
      // 调用函数,再渲染一次
      this.initDiagram();
    },
  },

}
</script>
<style lang="less" scoped>
body #myDiagramDiv {
  width: 100%;
  height: 500px;

  #myDiagramDiv canvas {
    outline: none !important;
    border: none;
    background: color(#E6EEEE);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
}
</style>
